<template>
  <el-card shadow="hover" class="stat-card" :style="cardStyle">
    <div class="card-content">
      <div class="icon-container" :style="iconStyle">
        <i :class="icon"></i>
      </div>
      <div class="text-container">
        <div class="title">{{ title }}</div>
        <div class="count">{{ count }}</div>
        <div class="percentage">{{ percentage }}%</div>
      </div>
    </div>
  </el-card>
</template>

<script setup lang="ts">
import { computed } from 'vue'

const props = defineProps({
  title: {
    type: String,
    required: true
  },
  count: {
    type: Number,
    required: true
  },
  icon: {
    type: String,
    required: true
  },
  color: {
    type: String,
    default: '#409eff'
  },
  percentage: {
    type: Number,
    default: 0
  }
})

const cardStyle = computed(() => ({
  borderLeft: `4px solid ${props.color}`
}))

const iconStyle = computed(() => ({
  backgroundColor: `${props.color}1a`,
  color: props.color
}))
</script>

<style scoped>
.stat-card {
  border-radius: 8px;
  border: none;
  transition: all 0.3s;
  
  &:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.1);
  }
}

.card-content {
  display: flex;
  align-items: center;
}

.icon-container {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 15px;
  
  i {
    font-size: 28px;
  }
}

.text-container {
  flex: 1;
  
  .title {
    font-size: 14px;
    color: #909399;
    margin-bottom: 5px;
  }
  
  .count {
    font-size: 24px;
    font-weight: 600;
    color: #303133;
    margin-bottom: 3px;
  }
  
  .percentage {
    font-size: 14px;
    color: #67c23a;
  }
}
</style>